<template>
  <div class="ratingselect">
	    <div class="rating-type border-1px">
	      <span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">{{desc.all}}<span
	          class="count">{{ratings.length}}</span></span>
	      <span @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">{{desc.positive}}<span
	          class="count">{{positives.length}}</span></span>
	      <span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">{{desc.negative}}<span
	          class="count">{{negatives.length}}</span></span>
	    </div>
	    <div @click="toggleContent" class="switch" :class="{'on':onlyContent}">
	      <span class="icon-check_circle"></span>
	      <span class="text">只看有内容的评价</span>
	    </div>
        
  </div>
</template>

<script>
const POSITYIVE=0;
const NEGATIVE=1;
const ALL=2;

export default {
  name: 'ratingselect',
  data () {
    return {
    	
    }
  },
  props: {
      ratings: {//所有数据
        type: Array,
        default() {
          return [];
        }
      },
       selectType: {//用户选择类型 - +  *
        type: Number,
        default: ALL
      },
      onlyContent: {//只读内容
        type: Boolean,
        default: false
      },
      desc: {//3种状态
        type: Object,
        default() {
          return {
            all: '全部',
            positive: '满意',
            negative: '不满意'
          };
        }
      }
   },
    computed: {
      positives() {
        return this.ratings.filter((rating) => {
          return rating.rateType === POSITYIVE;
        });
      },
      negatives() {
        return this.ratings.filter((rating) => {
          return rating.rateType === NEGATIVE;
        });
      }
    },
    methods: {
      select(type, event) {
        if (!event._constructed) {
          return;
        }
        this.selectType= type;
        this.$emit('ratingtype.select', type)
      },
      toggleContent(event) {
        if (!event._constructed) {
          return;
        }
        this.onlyContent = !this.onlyContent;
        console.log(!this.onlyContent)
         this.$emit('content.toggle', this.onlyContent)
      }
    }
    

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
 	.ratingselect{
 		.rating-type{
 			padding: 18px 0;
 			margin: 0 18px;
 			&.border-bottom{
 				border-bottom: rgba(7,17,271.2);
 			}
 			font-size:0;
 			.block{
 			  display: inline-block;
 		      padding:  8px 12px;
 		      margin-right: 8px;
 		      border-radius:2px ;
 		      color: rgb(77,85,93);
 		      line-height: 16px;
 		      font-size: 12px;
 		      &.active{
 		      	 color: #FFFFFF;
 		      	 }
 		      .count{
 		      	margin-left: 2px;
 		      
 		      	font-size: 8px;
 		      }
 		      &.positive{
 		      	 background: rgba(0,160,220,.2);
 		      	 &.active{
 		      	 	background: rgb(0,160,220);
 		      	 }
 		      }
 		      &.negative{
 		      	background: rgba(77,85,93,.2);
 		      	&.active{
 		      	background: rgb(77,85,93);
 		      	 }
 		      }
 			}
 		}
 		.switch{
 				padding: 12px 18px;
 				line-height: 24px;
 				border-bottom: rgba(7,17,271.2);
 				color: rgb(147,153,159);
 				font-size: 0;
 				&.on{
 				   .icon-check_circle{
 		               color: #00c850;
 				   }
 				}
 				.icon-check_circle{
 					display: inline-block;
 					vertical-align: top;
 					font-size: 24px;
 					margin-right: 4px;
 				}
 				.text{
 					display: inline-block;
 					vertical-align: top;
 					font-size: 12px;
 				}
 			}
 		
 	}
</style>
